<template>
  <div>
	
	<myheader></myheader>

	<br>
		<!-- 面包屑导航 -->
		<Breadcrumb :datas='datas'></Breadcrumb>
	<section class="featured-block text-center">
		<div class="container">
			
			<table>
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						用户名:
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='username'>
					</td>
				</tr>
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						密&nbsp;&nbsp;&nbsp;码:
					</td>
					<td style='padding: 5px;'>
						<input type="password" name="" id="" v-model='password'>
					</td>
				</tr>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>

					</td>
					<td style='padding: 5px;'>
						<!-- 滑块验证码 -->
						<drag-verify
							:width="width"
							:height="height"
							:text='text'
							ref='Verify'
						>

						</drag-verify>
					</td>
				</tr>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>

					</td>
					<td style='padding: 5px;'>
						<Button @click='submit'>登录</Button>&nbsp;&nbsp;

						<img :src="src" alt="" style="cursor: pointer;" @click='sina'>

						<img :src="ding_src" alt="" style="" style="cursor: pointer;" @click='ding_login'>

					</td>
				</tr>

			</table>

		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

import dragVerify from 'vue-drag-verify';

import {config,formatXml} from '../config.js'


export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //声明面包屑变量
	  datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}],
	  username:'',
	  password:'',

	  //滑块验证码变量
	  text:'请将滑块拖动到最右侧',
	  width:300,
	  height:40,

	  src:config['img_src'] + '/sina.png',
	  ding_src:config['img_src'] +  '/dingding.png',
    }
  },

  //注册组件标签
  components:{
	'myheader': myheader,
	'myfooter': myfooter,

	dragVerify: dragVerify,

  },

  mounted:function(){

   
  
},
  methods:{
	  //提交注册
	  submit:function(){

		//验证是否拖动
		console.log(this.$refs.Verify.isPassing);

		  //判断用户名非空
		  if (this.username == ""){
			//   alert('用户名不能为空');4
			this.$Message("用户名不能为空")
			  return false;
		  }
		  //判断密码非空
		  if (this.password == ""){
			//   alert('密码不能为空');4
			this.$Message("密码不能为空")
			  return false;
		  }

		  //判断是否拖动滑块验证码
		  if(this.$refs.Verify.isPassing == false){
			this.$Message("请拖动滑块验证码");
			return false

		}

		  //向后端发送请求
		  this.axios.get(config['after_end'] + '/login/',{params:{username:this.username,password:this.password}}).then((result)=>{
			  //打印接口返回值
			  console.log(result)
			  //提醒用户已登录成功
			  this.$Message(result.data.message)

			  //判断
			  if(result.data.code == 200){
				
				//将用户名和id存储到 localstorage
				localStorage.setItem('username',result.data.username);
				localStorage.setItem('uid',result.data.uid);
				//#保存jwt令牌到localStorage
				localStorage.setItem('jwt',result.data.jwt)
				
				//跳转
				this.$router.push('/')

			  }


		  })

	  },

	  //新浪微博登录
	  sina:function(){
		  console.log(config['baseurl'])
		  console.log(formatXml("hello"))

		  //组装url
		  //组装url
		  let url = "https://api.weibo.com/oauth2/authorize?client_id=3800897608&redirect_uri=" + config['after_end'] +"/md_admin/weibo";
		  
		  //进行跳转
		  window.location.href = url;


	  },

	  //钉钉登录
	  ding_login:function(){
		var appid = 'dingoaukgkwqknzjvamdqh';
    	var redirect_uri = 'http://localhost:8000/dingding_back/';

		var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=' + appid+ '&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
		
		window.location.href = url;

	  }
     
  }
}


</script>
 
<style>



</style>